<!-- BOARDS -->
<div id="boards" class="md-accent-bg" layout="column" flex>

    <!-- BOARD SELECTION -->
    <div id="board-selector" layout="column" layout-align="start center" flex>

        <h1 translate="SB.SCRUMBOARD_APP">Scrumboard App</h1>

        <!-- BOARD LIST -->
        <div class="board-list" layout="row" layout-align="center center" layout-wrap>

            <!-- BOARD -->
            <div class="board-list-item" ng-repeat="board in vm.boardList"
                 ui-sref="app.scrumboard.boards.board({id:board.id, uri:board.uri})"
                 layout="column" layout-align="center center">
                <md-icon md-font-icon="icon-trello" class="icon s64"></md-icon>
                <div class="board-name">{{board.name}}</div>
            </div>
            <!-- / BOARD -->

            <!-- NEW BOARD BUTTON -->
            <div class="board-list-item add-new-board" layout="column" layout-align="center center"
                 ui-sref="app.scrumboard.boards.addBoard">
                <md-icon md-font-icon="icon-plus-circle" class="icon s64"></md-icon>
                <div class="board-name" translate="SB.ADD_NEW_BOARD">Add new board</div>
            </div>
            <!-- / NEW BOARD BUTTON -->

        </div>
        <!-- / BOARD LIST -->

    </div>
    <!-- / BOARD SELECTION -->

</div>
<!-- / BOARDS -->
